<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="@/assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
    <h1>
      <!-- <span>Vite4 + Vue2.7</span> -->
      {{ msg }}
    </h1>

    <div class="card">
      <button type="button" @click="changeData">count is {{ userStore.countAdd }}</button>
    </div>
    <p v-for="item in guideSites" :key="item.name">
      <a :href="item.url" target="_blank">{{ item.name }}</a>
    </p>
    <p class="read-the-docs">点击以上图标学习更多</p>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import { ref, reactive } from 'vue'
import { queryPage } from "@/requests/api/purchase-receipt.ts"
import { useUserStore } from "@/stores/users"
// import { storeToRefs } from 'pinia';
import { mainState } from '../../defineType';

defineProps<{ msg: string }>()

const userStore = useUserStore()
// const { count, info } = storeToRefs(userStore);
let queryParams = reactive({
  pageIndex: 1,
  pageSize: 10,
  condition: {
    transactionType: '',
    org: '',
    startTime: '',
    endTime: '',
  }
})
onMounted(async () => {
  let journalEntryResult = await queryPage(queryParams);
  console.log("数据", journalEntryResult)
})
const changeData = () => {
  // 方式一：最简单的方法，如下
  // 解构后更改方式
  // count.value++;
  // 结构前更改方式
  // mainStore.count ++
  // // 方式二：更好的批量更新方法，通过$patch传递一个函数来实现，这里的state就是useMainStore容器中的state
  // mainStore.$patch((state:mainState) => {
  //   state.count ++;
  //   state.info = "pinia更新了状态";
  // })
  // 方式三：通过 actions 来修改数据
  userStore.changeState()
}
// 数据持久化
userStore.$subscribe((_: any, state: mainState) => {
  localStorage.setItem('main-store', JSON.stringify({ ...state }))
})

const guideSites = ref([
  { url: "https://vuejs.org/guide/quick-start.html#local", name: "create-vue" },
  { url: "https://github.com/vuejs/language-tools", name: "volar" },
  { url: "https://element.eleme.cn/#/zh-CN/component/installation", name: "element2" },
  { url: "https://v3.router.vuejs.org/zh/guide/", name: "vue-router3" },
  { url: "https://dayjs.fenxianglu.cn/category/", name: "dayjs" }
])
</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.read-the-docs {
  color: #888;
}
</style>
